<template>
  <view class="login-container">
    <!-- 欢迎页面 -->
    <view class="welcome-page">
      <view class="logo-container">
        <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      </view>
      
      <view class="welcome-text">
        <text class="welcome-title">欢迎回来</text>
      </view>
      
      <view class="login-options">
              <button class="primary-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
          <uni-icons type="weixin" size="25" color="white" class="weixin"></uni-icons>
          <text>手机号一键登录</text>
        </button>
        
        <button class="secondary-btn" @click="goToPhoneLogin">
          <uni-icons type="phone-filled" size="25" color="red" class="phone"></uni-icons>
          其他手机号登录
        </button>
        
        <view class="skip-login" @click="goToHome">
          暂不登录，先去逛一下
        </view>
      </view>
      
      <view class="agreement" >
        <view class="radio-container" @click="toggleAgreement">
          <view class="radio" :class="{ checked: agreedToTerms }">
            <view v-if="agreedToTerms" class="radio-dot"></view>
          </view>
        </view>
        我已阅读并同意
        <text class="link" @click.stop="showAgreement">《用户协议》</text>
        和
        <text class="link" @click.stop="showPrivacyPolicy">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script>
import routeGuard from '@/utils/routeGuard.js'
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      loading: false,      // 登录加载状态
      agreedToTerms: false // 是否同意协议
    }
  },
  
  onLoad(options) {
    // 获取重定向参数
    this.redirect = options.redirect || ''
  },
  
  methods: {
    ...mapActions(['wechatLogin', 'fetchUserInfo']),
    
    // 切换协议同意状态
    toggleAgreement() {
      this.agreedToTerms = !this.agreedToTerms
    },
    
    // 检查协议是否已同意
    checkAgreement() {
      if (!this.agreedToTerms) {
        return new Promise((resolve) => {
          uni.showModal({
            title: '提示',
            content: '请先同意用户协议和隐私政策',
            confirmText: '同意',
            success: (res) => {
              if (res.confirm) {
                this.agreedToTerms = true
                resolve(true)
              } else {
                this.agreedToTerms = false
                resolve(false)
              }
            }
          })
        })
      }
      return Promise.resolve(true)
    },

    // 获取手机号并登录
    async getPhoneNumber(e) {
      // 检查协议是否已同意
      const shouldContinue = await this.checkAgreement()
      if (!shouldContinue) return
      console.log(e);
      // 检查是否授权成功
      if (e.detail.errMsg !== 'getPhoneNumber:ok') {
        uni.showToast({
          title: '授权失败，请重试',
          icon: 'none'
        })
        return
      }
      
      this.loading = true
      
      try {
        // 获取微信登录code
        const loginRes = await this.getWechatCode()
        // 调用微信登录接口
        const result = await this.wechatLogin({
          code: loginRes.code,
          encryptedData: e.detail.encryptedData,
          iv: e.detail.iv
        })
        if (result.success) {
          // 登录成功后的处理
          setTimeout(() => {
            routeGuard.loginSuccess()
          }, 1000)
        }
      } catch (error) {
        console.error('登录失败:', error)
        uni.showToast({
          title: error.message || '登录失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    // 获取微信登录code
    getWechatCode() {
      return new Promise((resolve, reject) => {
        uni.login({
          provider: 'weixin',
          success: (res) => {
            if (res.code) {
              resolve(res)
            } else {
              reject(new Error('获取微信登录code失败'))
            }
          },
          fail: (err) => {
            reject(new Error('微信登录失败: ' + err.errMsg))
          }
        })
      })
    },
    
    // 跳转到手机号登录页面
    async goToPhoneLogin() {
      // 检查协议是否已同意
      const shouldContinue = await this.checkAgreement()
      if (!shouldContinue) return
      
      uni.navigateTo({
        url: '/pages/login/phoneLogin'
      })
    },
    
    // 跳转到注册页
    goToRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      })
    },
    
    // 显示用户协议
    showAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/user-agreement'
      })
    },
    
    // 显示隐私政策
    showPrivacyPolicy() {
      uni.navigateTo({
        url: '/pages/agreement/privacy-policy'
      })
    },
    
    // 跳转到首页
    goToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style>
.login-container {
  min-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 0 40rpx;
}

/* 欢迎页面样式 */
.welcome-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 80rpx;
}

.logo-container {
  margin-bottom: 60rpx;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}

.welcome-text {
  text-align: center;
  margin-bottom: 100rpx;
}

.welcome-title {
  font-size: 44rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.welcome-subtitle {
  font-size: 28rpx;
  color: #999;
  display: block;
}

.login-options {
  width: 100%;
  margin-bottom: 80rpx;
}

.primary-btn {
  width: 100%;
  height: 96rpx;
  background-color: #d81e06;
  color: #fff;
  border-radius: 48rpx;
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.secondary-btn {
  width: 100%;
  height: 96rpx;
  background-color: #fff;
  color: #d81e06;
  border: 2rpx solid #d81e06;
  border-radius: 48rpx;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon {
  margin-right: 10rpx;
  font-size: 36rpx;
}

.agreement {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10rpx;
}


.radio-container {
  margin-right: 10rpx;
}

.radio {
  width: 32rpx;
  height: 32rpx;
  border: 2rpx solid #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio.checked {
  border-color: #d81e06;
}

.radio-dot {
  width: 16rpx;
  height: 16rpx;
  background-color: #d81e06;
  border-radius: 50%;
}

.register-link {
  font-size: 28rpx;
  color: #666;
  text-align: center;
}

.link {
  color: #d81e06;
  text-decoration: underline;
}

button {
  line-height: 1.5;
}

.weixin, .phone{
  margin-right: 10rpx;
}

.skip-login {
  font-size: 28rpx;
  color: #999;
  text-align: center;
  margin-top: 20rpx;
  padding: 10rpx;
  text-decoration: underline;
}
</style>